<template>
  <el-dialog :visible="visible" :title="title" @close="close" width="56%" :close-on-click-modal="false">
    <el-tree
        :data="menuList"
        show-checkbox
        node-key="menu_ID"
        :props="defaultProps"
        :default-checked-keys="selectMenuList"
        @check="currentChecked">
    </el-tree>
    <span slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { roleService } from '@/services';
export default {
  name: 'roleQxEdit',
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    menuList: {
      type: Array,
      required: true,
    },
    qx: {
      type: String,
      required: true,
    },
    selectMenuList: {
      type: Array,
      required: true,  
    },
    role_id: {
      type: Number,
    }
  },
  data() {
      return {
        defaultProps: {
            children: 'subMenu',
            label: 'menu_NAME'
        },
      }
  },
  computed: {
    title() {
      var right = '';
      if(this.qx === 'rights') {
         right = '菜单';
      } else if(this.qx === 'add_qx') {
        right = '添加';
      } else if(this.qx === 'del_qx') {
        right = '删除';
      } else if(this.qx === 'edit_qx') {
        right = '修改';
      } else if(this.qx === 'query_qx') {
        right = '查看';
      }

      return '编辑'+right+'权限';
    },
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    },
    async confirm() {
      try {
        var role = {};
        role.role_id= this.role_id;
        role.qx=this.qx;
        role.ids = this.selectMenuList.join(",");
            
        await roleService.editRoleRights(role);

        this.$message.success('修改成功');
        this.$emit('update:visible', false);
      } catch (e) {
        console.error(e);
      }
    },
    currentChecked (nodeObj, SelectedObj) {
      this.$emit('update:selectMenuList', SelectedObj.checkedKeys);
    },
  },
}
</script>